<script setup>
import MyNav from "@/components/MyNav.vue";
import MyHead from "@/components/MyHead.vue";
import MyTable from "@/components/MyTable.vue";
import MyPager from "@/components/MyPager.vue";
import {onMounted, ref, shallowReactive} from "vue";
import {myPage} from "@/util";
import {pageApi} from "@/api/RoomApi";
// 表格数据
let records = ref();

/* ==================== 单条添加 ==================== */
function insertRoom() {
}

/* ==================== 单条删除 ==================== */
function deleteRoom() {
}

/* ==================== 打印报表 ==================== */
function excelRoom() {
}

function detailRoom() {
}

function deleteRooms() {
}

function updateRoom() {
}

/* ==================== 批量删除 ==================== */
/* ==================== 分页查询 ==================== */
let pageInfo = shallowReactive({'pageNum': 1, 'pageSize': 5, 'fn': pageRoom});

async function pageRoom(pageNum = pageInfo['pageNum'],
                        pageSize = pageInfo['pageSize']) {
  await myPage({
    'api': pageApi,
    'params': {'pageNum': pageNum, 'pageSize': pageSize},
    'records': records,
    'pageInfo': pageInfo
  });
}

/* ==================== 单条查询 ==================== */
/* ==================== 表格数据 ==================== */




/* ==================== 搜索房间名 ==================== */

function searchByTitle() {
}

/* ==================== 加载函数 ==================== */
onMounted(() => {
  pageRoom();
})


function defaultInfo(info) {
  return info ? info : '暂无描述信息';
}

</script>

<template>
  <my-pager :page-info="pageInfo"/>

  <my-nav :items="[
      {'icon': 'User', 'label': '员工管理'},
      {'icon': 'User', 'label': '房间列表'},
  ]"/>

  <my-head :items="[
    {'type': 'ipt', 'span': 5, 'placeholder': '房间名称', 'fn': searchByTitle},
    {'type': 'insertBtn', 'offset': 16, 'fn': insertRoom},
    {'type': 'deleteBtn', 'fn': deleteRooms},
    {'type': 'excelBtn', 'fn': excelRoom},
  ]"/>

  <my-table :records="records" :columns="[
    {'column': ['基本信息', '房间名称'], 'property': 'title'},
    {'column': ['基本信息', '房间容量'], 'property': 'capacity', 'type': 'tag', 'suffix': '人'},
    {'column': ['基本信息', '房间地址'], 'property': 'address', 'type': 'card'},
    {'column': ['基本信息', '房间描述'], 'property': 'info', 'type': 'card', 'format': info => defaultInfo(info)},
  ]" :buttons="[
      {'type': 'info', 'fn': detailRoom},
      {'type': 'update', 'fn': updateRoom},
      {'type': 'delete', 'fn': deleteRoom},
]"/>

</template>

<style scoped lang="scss">

</style>